@charset "UTF-8";

@import '~scss/themes/index.scss';

$conponent-name: 'page';

/**
  页面样式类
*/

@mixin page-scroll() {
	width: 100%;
	height: 100%;
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	position: relative;
	margin-bottom: -1px;
	// 对于滚动的页面布局 一般会在底部留下一定的空白距离，不让内容紧紧贴在底部
	&:after {
		content: '';
		display: block;
		width: 100%;
		height: $page--padding-bottom;
	}
}

.ui-#{$conponent-name} {
	margin: 0 auto;
	max-width: $max-width;
	min-width: $min-width;
	overflow: hidden;

	&.ui-page__flex {
		height: 100%;
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		max-width: $max-width;
		min-width: $min-width;
	}

	&.ui-page__scroll {
		@include page-scroll();
	}

	&.page__has-bottom {
		display: flex;
		flex-direction: column;
		height: 100%;

		.page-container {
			@include page-scroll();
		}

		// 页面 tabber
		.page-bottom {
			flex: 0 0 calc(#{$page-tabber-height} + #{$safe-tabbar-height});
			height: calc(#{$page-tabber-height} + #{$safe-tabbar-height});
			z-index: 100;
			width: 100%;
			background-color: #fff;
			-webkit-user-select: none;
			user-select: none;
		}
	}
}

// 各个平台的优化处理
// 对于IOS平台
.ios .ui-page.ui-page__scroll {
}
